<template>
  <div>
    <h1>about---{{ $route.query.name }}---{{ $route.query.age }}</h1>
    <h1>about---{{ $route.params.name }}---{{ $route.params.age }}</h1>
    <!-- <h1>about---{{ props.name }}---{{ props.age }}</h1> -->
    <h1>about---{{ route.params.name }}---{{ route.params.age }}</h1>
    <h1>about---{{ name }}---{{ age }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import { defineProps } from 'vue'

// const props = defineProps(['name', 'age'])

import { useRoute } from 'vue-router'

const route = useRoute()
// console.log(route)

const name = ref(route.params.name)
const age = ref(route.params.age)
</script>

<style lang="scss" scoped></style>
